<template>
  <div id="ind">
    <!-- 顶部导航栏 -->
    <div class="top-nav">
      <t-navbar
        title="花语大全"
        :fixed="false"
        left-arrow
        @left-click="handleClick"
      />
      <div class="toggle-tabs">
        <div
          class="tab"
          :class="{ active: activeTab === 'flowers' }"
          @click="activeTab = 'flowers'"
        >
          花材
        </div>
        <div
          class="tab"
          :class="{ active: activeTab === 'branch' }"
          @click="activeTab = 'branch'"
        >
          枝数
        </div>
      </div>
    </div>
    <div class="tab-content">
      <div class="flowers1" v-if="activeTab === 'flowers'">
        <div class="input">
          <t-search
            v-model="value"
            :clearable="true"
            shape="round"
            placeholder="请输入关键字"
            @change="onChange"
          ></t-search>
          <button class="but">搜索</button>
        </div>
        <!-- 列表 -->
        <div class="list" v-for="(item, index) in list" :key="index">
          <div class="list-top">
            <div class="list-top-left">
              <img :src="item.img" alt="" />
            </div>
            <div class="list-top-right">
              <div class="ltr-name">{{ item.name }}</div>
              <div class="ltr-j" @click="$router.push(item.path)">
                {{ item.j
                }}<icon
                  size="20"
                  name="chevron-right"
                  style="padding-left: 30px"
                />
              </div>
              <div class="ltr-tab">
                <button class="circle-button">{{ item.tab1 }}</button>
                <button class="circle-button">{{ item.tab2 }}</button>
                <button class="circle-button">{{ item.tab3 }}</button>
                <button class="circle-button" v-if="item.tab4">{{ item.tab4 }}</button>
              </div>
            </div>
          </div>
          <div class="list-bottom" v-if="item.img1">
            <div class="lb-img">
              <div class="lbi-img" v-for="i in 4" :key="i">
                <div class="img1">
                  <img :src="item.img1" alt="" />
                </div>
                <div class="price">￥234</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="flowers2" v-if="activeTab === 'branch'">枝叶</div>
    </div>
  </div>
</template>

<script setup>
import "./ind.css";
import { ref } from "vue";
import { Icon } from "tdesign-icons-vue-next";
const list = ref([
  {
    img: "https://picsum.photos/200/300",
    name: "玫瑰",
    j: "纯洁的爱、美丽的爱情、美好常在",
    tab1: "恋人",
    tab2: "情侣",
    tab3: "伴侣",
    img1: "https://picsum.photos/200/200",
  },
  {
    img: "https://picsum.photos/200/300",
    name: "百合",
    j: "顺利、心想事成、祝福",
    tab1: "恋人",
    tab2: "朋友",
    tab3: "同事",
    tab4: "长辈",
    img1: "https://picsum.photos/200/200",
  },
  {
    img: "https://picsum.photos/200/300",
    name: "康乃馨",
    j: "思念、祝健康长寿、祝永远美丽",
    tab1: "父母",
    tab2: "长辈",
    tab3: "老师",
  },
  {
    img: "https://picsum.photos/200/300",
    name: "向日葵",
    j: "信念、光辉、忠诚、爱慕",
    tab1: "朋友",
    tab2: "同事",
    tab3: "恋人",
    tab4: "长辈",
    path:'/sun'
  },
]);

const onChange = (val) => {
  console.log("change: ", val);
};

const value = ref("");

const activeTab = ref("flowers"); // 默认激活“花材”选项卡

const changeTab = (tabName) => {
  activeTab.value = tabName; // 更新当前激活的选项卡
};

const handleClick = () => {
  console.log("left-click");
  window.history.back();
};
</script>

<style lang="scss" scoped></style>
